<!-- DAG图形 -->
<template>
  <div class="dagreLayout-page3">
    <div class="compactBoxTree-canvas" ref="root"></div>
    <div :class="['chart-box', isChartShow ? 'chart-box-show' : '']">
      <div class="btn-pickup" @click="isChartShow = false">
        <i class="el-icon-arrow-down" />
      </div>
    </div>
  </div>
</template>

<script>
import "butterfly-dag/dist/index.css";
import DagreCanvas from "./dagre-canvas";
import BaseNode from "./base_node";
let vueRootM = null;
export default {
  name: "DAG",
  components: {},
  props: {
    mockData: {
      type: Object,
      default: () => {},
      required: true,
    },
    isShow: {
      type: Boolean,
      default: () => {},
      required: true,
    },
  },

  data() {
    return {
      canvas: null,
      canvasConf: {
        disLinkable: true, // 可删除连线
        linkable: true, // 可连线
        draggable: true, // 可拖动
        zoomable: true, // 可放大
        moveable: true, // 可平移
        theme: {
          // Bezier
          // AdvancedBezier
          // BrokenLine
          // Flow
          // Manhattan
          edge: {
            shapeType: "AdvancedBezier",
            arrow: true,
            arrowPosition: 0.6,
          },
        },
        layout: {
          type: "dagreLayout",
          options: {
            // rankdir: "LR",
            rankdir: "TB",
            nodesep: 80,
            ranksep: 40,
            controlPoints: false,
          },
        },
      },
      drawData: {},
      lineChartData: {},
      isChartShow: false,
      // isShow: true, //是否显示点击节点的chart图
    };
  },
  watch: {
    mockData: {
      // immediate: true,
      handler(newData, oldData) {
        console.log(newData, "我是组件的");
        this.drawData = newData;
        this.renderData(this.mockData.nodes);
        // vueRootM.reDraw();
        vueRootM.reDraw();
      },
      deep: true,
    },
  },
  created() {
    vueRootM = this;
  },
  mounted() {
    this.draw();
  },

  methods: {
    draw() {
      const root = this.$refs["root"];
      if (!root) {
        // console.warn("当前canvas没有绑定dom节点，无法渲染");
        return false;
      } else {
        this.canvasConf.root = root;
        this.canvas = new DagreCanvas(this.canvasConf);
        this.renderData(this.mockData.nodes ? this.mockData.nodes : "");
        this.drawData = this.mockData;
        this.canvas.draw(this.drawData, () => {});
        this.canvas.setMinimap(true);
      }
    },
    reDraw() {
      this.canvas.move([0, 0]);
      this.canvas.zoom(1);
      this.canvas.redraw(this.drawData, () => {});
    },
    renderData(data) {
      if (data.length > 0) {
        data.forEach((item) => {
          item.Class = BaseNode;
        });
      }
    },
    showData(state, id, item) {
      if (item.stateNum === "88888") {
        vueRootM.$parent.$parent.getMoreDagList(item);
      }
    },
    //鼠标右键事件
    rightClick(e, item, isShowMenu) {
      if (isShowMenu) {
        vueRootM.$parent.$parent.rightClick(e, item, isShowMenu);
      } else {
        vueRootM.$parent.$parent.isShowMenu = isShowMenu;
      }
    },
  },
};
</script>

<style lang="scss">
.dagreLayout-page3 {
  width: 100%;
  height: calc(100% - 42px);
  position: relative;
  .compactBoxTree-canvas {
    width: 100%;
    height: 100%;
  }
  .chart-box {
    position: absolute;
    overflow: hidden;
    left: -1px;
    right: -1px;
    bottom: -2px;
    z-index: 3;
    height: 0px;
    background: #fff;
    transition: all 0.5s;
  }
  .chart-box-show {
    height: 490px;
    border: 1px solid #dddddd;
  }
  .btn-pickup {
    position: absolute;
    border: 1px solid rgba(228, 228, 228, 1);
    border-radius: 0px 0px 4px 4px;
    width: 60px;
    height: 24px;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
  }
  .titlemg {
    margin: 24px 12px 12px;
  }
  .mg12 {
    margin: 12px;
  }
}
</style>
